<template>
    <section>
        <div class="rule-content">
            <!-- 说明 -->
            <p class="tips">tips：此课程的合班班级将在同一时间统一地点上课。</p>
            <!-- 课程选择器 -->
            <!-- 合班区域 -->
            <div class="choose-class" id="together">
                <div class="together-list" v-loading="togetherLoading">
                    <!-- 合班可选班级展示 -->
                    <ul class="choose-course-list" style="width:80px">
                        <li v-for="item in courseOption" @click="changeCours(item.id)" :class="course==item.id?'active':''">{{item.name}}</li>
                    </ul>
                    <ul class="choose-class-list" id="choose-class-list" style="width:200px" v-show="!showNoClassText">
                        <li v-for="(item , index) in classList">
                            <el-checkbox v-model="classChecked" :key="item.id" :disabled="item.isMerge == 1" :label="item.id">{{item.name}}</el-checkbox>
                        </li>
                    </ul>
                    <!-- 合班无班级情况展示 -->
                    <p class="no-class-text" v-show="showNoClassText">
                        {{courseName}}课程没有教学班，排课中无{{courseName}}班，请核实{{courseName}}是否属于教学班课程，如果不是请在基础信息中更改课程类型
                    </p>
                </div>
                <!-- 合班操作按钮 -->
                <button type="button" class="mixed-class-btn" @click="mergeClass">合班 ></button>
                <!-- 合班结果展示 -->
                <!-- <div class="mixed-class-tips" style="margin-top:0;"> -->
                <el-table :data="tableData" class="class-mixed-table" v-loading="tableLoading" style="margin-top:0">
                    <el-table-column prop="classNames" label="合班结果" width="250">
                         <template slot-scope="scope">
                            <!-- 右侧班级列表 -->
                            <div style="float:right;width:65%;text-align:left;padding:5px 0;">
                                <span v-for="x in scope.row.classNamesArr">{{x}}<br></span>
                            </div>
                            <!-- 左侧课程名称 -->
                           <div style="padding:5px 0;">{{scope.row.courseName}}: </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" v-if="tableData.length!=0" width="150">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small" class="del-class">
                                删除合班
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- </div> -->
            </div>
        </div>
    </section>
</template>

<script>
    import utils from '../../../assets/js/urlConfig.js';
    export default {
        data() {
            return {
                course: '',
                courseName: '',
                courseOption: [],
                classList: [],
                classChecked: [],
                tableData: [],
                classIds: '',
                classType: '',
                tableLoading: true,
                togetherLoading: true,
                taskId: sessionStorage.getItem('taskId') || '91',
                showNoClassText: false
            }
        },
        mounted() {
            sessionStorage.setItem('courseInx', 4);
            this.getCourseOption();
            this.getTableData();
        },
        methods: {
            // 获取课程信息
            getCourseOption() {
                this.$http.get(`${utils.UrlConfig.GetQueryCourse}&taskId=${this.taskId}`)
                    .then(res => {
                        this.$set(this.$data, 'courseOption', res.data.bizData);
                        this.course = res.data.bizData[0].id;
                        this.courseName = res.data.bizData[0].name;
                        this.getClassList();
                    }).catch(error => {
                        this.$message.error(error);
                    })
            },
            // 获取合班结果
            getTableData() {
                this.$http.get(`${utils.UrlConfig.GetMergeInfo}&taskId=${this.taskId}`)
                    .then(res => {
                        this.tableLoading = false;
                        res.data.bizData.forEach(function(value, index, array) {
                            if(value.classNames){
                                array[index].classNamesArr = value.classNames.split("、");
                            }else{
                                // 异常处理
                                array[index].classNamesArr = [];
                            }
                        });
                        this.$set(this.$data, 'tableData', res.data.bizData);
                    }).catch(error => {
                        this.$message.error(error);
                    })
            },
            // 切换课程
            changeCours(value) {
                this.course = value;
                this.courseOption.forEach(function(element) {
                    if (element.id == value) {
                        this.courseName = element.name
                    }
                    return;
                }, this);
                this.togetherLoading = true;
                this.getClassList();
            },
            // 合班
            mergeClass() {
                if(this.classChecked.length < 2) {
                    this.$message.error('请至少选择两个班级进行合班');
                    return;
                }
                this.classChecked.forEach(function(element) {
                    this.classIds += element + ','
                }, this);
                this.classIds = this.classIds.slice(0, this.classIds.length - 1);
                const param = {
                    "taskId": this.taskId,
                    'courseId': this.course,
                    'classIds': this.classIds,
                    'classType': this.classType,
                }

                this.$http.post(utils.UrlConfig.AddMergeInfo, this.changeParams(param))
                    .then(res => {
                        this.$set(this.$data, 'classChecked', []);
                        this.classIds = '';
                        this.getClassList();
                        this.tableLoading = true;
                        this.getTableData();
                    }).catch(error => {
                        this.$message.error(error);
                    })
            },
            // 获取勾选班级
            getClassList() {
                this.classLoading = true;
                this.$http.post(`${utils.UrlConfig.GetClassDtoByCourse}&taskId=${this.taskId}&courseId=${this.course}&courseName=${encodeURI(encodeURI(this.courseName))}`)
                    .then(res => {
                        this.$set(this.$data, 'classList', res.data.bizData);
                        this.$set(this.$data, 'classChecked', []);
                        this.classType = res.data.bizData && res.data.bizData[0] && res.data.bizData[0].classType || '';
                        this.showNoClassText = (res.data.bizData.length==0)?true:false;
                        this.togetherLoading = false;
                    }).catch(error => {
                        this.$message.error(error);
                    })

            },
            // 删除合班
            deleteRow(row) {
                this.$http.post(utils.UrlConfig.DeleteMergeInfo, `id=${row.id}`)
                    .then(res => {
                        this.getClassList();
                        this.tableLoading = true;
                        this.getTableData();
                    }).catch(error => {
                        this.$message.error(error);
                    })

            },
            changeParams(obj) {
                var str = '';
                for (var value in obj) {
                    str = str + `${value}=${obj[value]}&`
                }
                return str.slice(0, str.length - 1);
            },
        }
    }
</script>

<style scoped>
    .del-class{
        color: #36c6d3;
    }
    .rule-content .tips-procedure .procedure-item .order {
        line-height: 16px;
    }
    p.tips{
        color: #36c6d3;
        line-height: 2.5;
        margin-top: 10px;
        font-size: 14px;
    }
    #together:after, .together-list:after{
        content: '';
        display: block;
        clear: both;
    }
    #together > *, .together-list >*{
        float: left;
    }
    .together-list{
        padding: 30px 52px;
        box-sizing: border-box;
        background-color: #F9FAFE;
    }
    #together .mixed-class-btn{
        margin: 155px 50px 0;
    }
    .choose-course-list li{
        font-size: 15px;
        margin: 0;
        margin-bottom: 20px;
        cursor: pointer;
        position: relative;
    }
    .choose-course-list li:last-child{
        margin-bottom: 0;
    }
    .choose-course-list li.active{
        color: #36c6d3;
    }
    .choose-course-list li.active:before{
        display: inline-block;
        content: '';
        width: 0;
        height: 0;
        border-top: 6px solid #0000;
        border-left: 6px solid #36c6d3;
        border-bottom: 6px solid #0000;
        position: absolute;
        right: 25px;
        top: 5px;
    }
    .choose-course-list li:hover{
        color: #36c6d3;
    }
    .choose-class-list{
        margin-top: 0;
        height: 400px;
        overflow: scroll;
        overflow-x: hidden;
    }
    #choose-class-list li{
        margin-bottom: 15px;
        margin-right: 0;
        width: 100%;
    }
    #choose-class-list li .el-checkbox .el-checkbox__label{
        font-size: 15px;
        padding-left: 0;
        margin-left: -5px;
        width: 20px;
    }
    .together-list .no-class-text{
        width: 150px;
        padding: 0 5px;
        text-align: center;
        line-height: 2;
    }
    .rule-content .choose-class {
        margin-top: 0;
    }
    .el-table.class-mixed-table{
        max-width: 401px;
        overflow: hidden;
        overflow-x: hidden;
    }
</style>
